feat(docs): rewrite theming guide, simplified docs styles (#DS-2304) - #1896
Open
NikGurev wants to merge 3 commits into
Open
feat(docs): rewrite theming guide, simplified docs styles (#DS-2304)#1896NikGurev wants to merge 3 commits into
NikGurev wants to merge 3 commits into
Conversation
|
Visit the preview URL for this PR (updated for commit 8c0f30e): https://koobiq-next--prs-1896-s0m3cesh.web.app (expires Mon, 17 Aug 2026 07:55:33 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR rewrites the theming guides (EN/RU) into a practical “how-to” (setup, switching via KbqThemeService, using CSS variables, and overriding component variables) and updates the docs app to match the recommended theming approach by moving previously theme-mixin-based styling into component stylesheets. It also adds small live examples to support the guide content.
Changes:
- Reworked
docs/guides/theming.{en,ru}.mdto document the 3-layer CSS-variable model andKbqThemeService-based switching (incl.'auto'mode). - Added new docs-examples entries (notably
theme-css-variablesandblock-checkbox) and wired them into the docs examples registry/imports. - Refactored docs app theming/styles: removed per-component
_*theme.scssmixins and inlined those styles into component SCSS, plus small accessibility/style adjustments.
Reviewed changes
Copilot reviewed 32 out of 32 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/docs-examples/example-module.ts | Registers new live examples and adds lazy-import routing for them. |
| packages/docs-examples/components/core/theme-css-variables/theme-css-variables-example.ts | New example demonstrating reading theme CSS variables and toggling via KbqThemeService. |
| packages/docs-examples/components/core/index.ts | Exports/declares the new core example alongside existing ones. |
| docs/guides/theming.ru.md | Rewritten RU theming guide: setup, switching, using variables, overrides, and guidance. |
| docs/guides/theming.en.md | Rewritten EN theming guide mirroring the RU structure/content. |
| docs/guides/migration.ru.md | Updates migration guide link to the theming overview page. |
| apps/docs/src/styles/_theme-kbq.scss | Removes docs-app component theme mixin includes; keeps library-level theme includes. |
| apps/docs/src/styles/_markdown.scss | Adds explicit focus styling for markdown links. |
| apps/docs/src/styles/_hot-keys.scss | Converts hot-keys styling from mixin-based theme to direct CSS variables usage. |
| apps/docs/src/main.scss | Ensures hot-keys styles are included via main stylesheet imports. |
| apps/docs/src/app/components/welcome/welcome.component.scss | Inlines theme/typography-related styling into the component stylesheet. |
| apps/docs/src/app/components/welcome/welcome.component.html | Switches to typography utility classes for consistent text styling. |
| apps/docs/src/app/components/welcome/_welcome-theme.scss | Removes now-unused theme mixins for welcome page. |
| apps/docs/src/app/components/sidenav/sidenav.scss | Inlines sidenav theme + typography adjustments into component stylesheet. |
| apps/docs/src/app/components/sidenav/_sidenav-theme.scss | Removes now-unused sidenav theme mixins. |
| apps/docs/src/app/components/page-not-found/page-not-found.scss | Inlines background theming into component stylesheet. |
| apps/docs/src/app/components/page-not-found/_page-not-found-theme.scss | Removes now-unused page-not-found theme mixin. |
| apps/docs/src/app/components/live-example-viewer/docs-live-example-viewer.scss | Inlines theme/typography tweaks into viewer stylesheet. |
| apps/docs/src/app/components/live-example-viewer/docs-live-example-viewer.html | Applies typography utility class to the footer. |
| apps/docs/src/app/components/live-example-viewer/_live-example-viewer-theme.scss | Removes now-unused live-example-viewer theme mixins. |
| apps/docs/src/app/components/icons-viewer/icons-viewer.scss | Inlines icons-viewer theme + typography styling into component stylesheet. |
| apps/docs/src/app/components/icons-viewer/icon-preview-modal/icon-preview-modal.scss | Inlines modal styling/typography adjustments into modal stylesheet. |
| apps/docs/src/app/components/icons-viewer/_icons-viewer-theme.scss | Removes now-unused icons-viewer theme mixins. |
| apps/docs/src/app/components/footer/footer.component.scss | Inlines footer theme + dropdown typography overrides into component stylesheet. |
| apps/docs/src/app/components/footer/footer.component.html | Applies typography utility class to footer controls. |
| apps/docs/src/app/components/footer/_footer-theme.scss | Removes now-unused footer theme mixins. |
| apps/docs/src/app/components/component-viewer/component-viewer.scss | Inlines component viewer theme + typography rules into component stylesheet. |
| apps/docs/src/app/components/component-viewer/_component-viewer-theme.scss | Removes now-unused component-viewer theme mixins. |
| apps/docs/src/app/components/anchors/anchors.component.scss | Inlines anchors theme styling into component stylesheet. |
| apps/docs/src/app/components/anchors/_anchors-theme.scss | Removes now-unused anchors theme mixin. |
| apps/docs/src/app/app.component.scss | Moves overlay background styling directly into app component styles. |
| apps/docs/src/app/_app-theme.scss | Removes now-unused app theme mixin that previously carried overlay/link focus styling. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+1097
to
+1099
| "files": [ | ||
| "block-checkbox-example.ts" | ||
| ], |
Comment on lines
+20
to
+22
| .docs-markdown__a:focus { | ||
| outline: var(--kbq-link-state-focused-outline) solid; | ||
| } |
Comment on lines
+99
to
+101
| .docs-welcome__category-item:focus { | ||
| border-color: var(--kbq-states-line-focus-theme); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Turn theming.{en,ru}.md into a guide instead of a changelog: how the three
layers fit together, how to read theme values in your own styles, how to
override a component's variables and why :root cannot reach them, and how to
build a component on top of the theme. Document theme switching against
KbqThemeService — 'auto' follows the system color scheme out of the box, so the
manual matchMedia recipe is gone — and list only .kbq-light/.kbq-dark as
selectors. Add a small live example.
Inline _*-theme.scss partials into their components' own stylesheets so
the docs app stops demonstrating the pattern the guide argues against; only
library-level includes stay in _theme-kbq.scss. Where the wrapping .docs
selector had been carrying the weight, rules get a real structural selector
instead.